<template>
  <div class="goods-list">
    <h1 class="con-right-title">商品列表</h1>
    <!--上部搜索条件组件-->
    <topSearch
      :form-inline="formInline"
      @toSearch="toSearch"
      :goodsTypes="goodsTypes"
      :goodsStatus="goodsStatus"
    ></topSearch>
    <!-- 按钮部分 -->
    <div class="btn-box">
      <el-row>
        <el-col :span="2">
          <el-button
            class="add"
            type="success"
            icon="el-icon-plus"
            @click="addBtn('add')"
          >
            新增
          </el-button>
        </el-col>
        <el-col :span="2" :offset="20">
          <freshCom @searchList="searchList"></freshCom>
        </el-col>
      </el-row>
    </div>
    <!-- 表格部分 -->
    <el-table
      id=""
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="700"
      ref="table"
    >
      <el-table-column width="50" label="序号" align="center">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        align="center"
      ></el-table-column>
      <el-table-column
        label="缩略图"
        align="center"
        prop="view"
        width="110"
        height="60"
      >
        <template slot-scope="scope">
          <listImgShow :imgInfo="scope.row.imgJson"></listImgShow>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createdTime"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 'ON'">上架</span>
          <span v-if="scope.row.status == 'OFF'">下架</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" prop="priceShow" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.priceShow ? scope.row.priceShow : '——' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类别" prop="goodsType" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.goodsType === 'PHYSICAL'">实物</span>
          <span v-if="scope.row.goodsType === 'COUPONS'">优惠券</span>
        </template>
      </el-table-column>
      <el-table-column label="所需鲜花" prop="price" width="180" align="center">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.price }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="库存"
        prop="stock,stockUsed"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            <span
              v-show="scope.row.stock === 0"
              :class="scope.row.stockUsed == 0 ? 'red' : ''"
              >{{ scope.row.stockUsed }}/{{ scope.row.stock }}</span
            >
            <span v-show="scope.row.stock !== 0"
              >{{
                scope.row.stockUsed === 0
                  ? scope.row.stock
                  : scope.row.stockUsed
              }}/{{ scope.row.stock }}</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="排序"
        prop="sort"
        align="center"
      ></el-table-column>
      <el-table-column
        label="每天可兑换次数"
        prop="changeNumber"
        width="220"
        align="center"
      ></el-table-column>
      <el-table-column
        label="最后修改时间"
        prop="updateTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作人"
        prop="updateName"
        align="center"
      ></el-table-column>
      <!-- <el-table-column label="商品名称" prop="title" align="center"></el-table-column> -->
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            size="medium"
            v-if="scope.row.status === 'OFF' && scope.row.stock != 0"
            @click="handleShelves(scope.row)"
            type="text"
            >上架
          </el-button>
          <el-button
            size="medium"
            :style="{ color: scope.row.status === 'ON' ? '#F56C6C' : '' }"
            v-if="scope.row.status === 'ON'"
            @click="handleShelves(scope.row)"
            type="text"
          >
            下架
          </el-button>
          <!-- style="color: red" -->
          <el-button
            v-if="scope.row.status != 'ON'"
            @click="addBtn('edit', scope.row.id, scope.row)"
            type="text"
          >
            编辑
          </el-button>
          <el-button
            v-if="scope.row.status != 'ON'"
            @click="delActive(scope.row)"
            type="text"
            >删除</el-button
          >
          <el-button
            v-if="scope.row.status === 'ON'"
            @click="handleRecord(scope.row.id)"
            type="text"
            >兑换记录</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 兑换记录弹窗 -->
    <!--  -->

    <!-- @close="goodsClose" -->
    <el-dialog
      width="70%"
      title="兑换记录"
      :visible.sync="recordDialog.isShow"
      append-to-body
      class="goods-record"
    >
      <el-table
        class="goods-data"
        :data="recordData"
        v-loading="recordLoading"
        border
        style="width: 100%"
        ref="table"
      >
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column label="用户名" align="center" prop="name" />
        <el-table-column label="大鹏号" align="center" prop="dpAccount" />
        <el-table-column label="兑换时间" align="center" prop="exchangeTime" />
        <el-table-column label="手机号" align="center" prop="mobile" />
      </el-table>
      <div class="page-box">
        <pageCom
          :searchParams="recordSearchParams"
          :total="recordTotal"
          @searchList="recordSearchList"
        ></pageCom>
      </div>
    </el-dialog>
    <!--分页-全局组件-->

    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import topSearch from './topSearch' // 上部搜索条件
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  getgoodsList,
  goodsOn,
  goodsOff,
  exchangeRecords,
  delgoods
} from '@/api/flowerActive/goods/index'
export default {
  name: 'goodsList',
  components: {
    topSearch
    // dialogSort,
    // uploadImgCom
  },
  mounted() {
    this.searchList()
  },
  data() {
    return {
      // 搜索条件
      formInline: {
        name: '', // 商品名称
        goodsType: '', // 商品类型
        status: '', // 商品状态
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      goodsTypes: [],
      goodsStatus: [],
      loading: true,
      recordLoading: true,
      // 表格数据
      tableData: [],
      // 总条数
      total: 0,
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 兑换记录弹窗
      recordDialog: {
        isShow: false // 默认隐藏
      },
      recordData: [],
      recordTotal: 0,
      // 分页数据
      recordSearchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      recordId: ''
    }
  },
  async created() {
    // 获取商品类别
    await this.getgoodsTypes()
    // 获取商品状态
    await this.getgoodsStatus()
    /* 获取列表 */
    await this.searchList()
  },
  watch: {
    $route: 'searchList'
  },
  methods: {
    // 获取字典 commodites_type 商品类别
    async getgoodsTypes() {
      let data = await sysNormalDisable('commodites_type')
      this.goodsTypes = data
    },
    // 获取字典 commodites_status 商品状态
    async getgoodsStatus() {
      let data = await sysNormalDisable('commodities_status')
      this.goodsStatus = data
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 获取列表 */
    searchList() {
      let params = { ...this.searchParams, ...this.formInline }
      delete params.createTime
      getgoodsList(params, (res) => {
        if (res.rows) {
          this.tableData = res.rows
          this.tableData.forEach((item, index) => {
            this.$set(item, 'imgJson', [])
            item.imgJson.push({
              url: item.image
            })
          })
          this.total = res.total
        }
        this.loading = false
      })
    },
    recordSearchList() {
      this.handleRecord(this.recordId)
    },
    // 新增/编辑方法
    addBtn(type = '', id = '', row = {}) {
      this.$router.push({
        path: '/flowerActive/goodsList/addEdit',
        query: {
          type: type,
          id: id
        }
      })
    },
    handleShelves(row) {
      var goodsType = row.status === 'ON' ? '下架' : '上架'
      var status = row.status === '0' ? '1' : '0'
      this.$confirm('确认' + goodsType + '该商品?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.status === 'OFF') {
          goodsOn(row.id, (res) => {
            this.searchList()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          })
        } else {
          goodsOff(row.id, (res) => {
            this.searchList()
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          })
        }
      })
    },
    // 删除商品
    delActive(item) {
      this.$confirm(`是否删除该商品`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delgoods(item.id, (res) => {
          this.searchList()
        })
      })
    },
    // 兑换记录
    handleRecord(id) {
      this.recordId = id
      let params = {
        ...this.recordSearchParams
      }
      exchangeRecords(id, params, (res) => {
        if (res.rows) {
          this.recordData = res.rows
          this.recordTotal = res.total
        }
        this.recordLoading = false
      })

      this.recordDialog.isShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.goods-list {
  @import url('~@common/style/imgBox.less');
  .add {
    margin-left: 30px;
  }
  .red {
    color: red;
  }
  .btn-box {
    margin-bottom: 30px;
  }
}
.goods-record {
  .el-dialog {
    .page-box {
      margin-top: 20px;
      text-align: center;
      :deep(.el-pagination.is-background .el-pager li:hover) {
        color: #1dc8a4;
      }

      :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
        line-height: 25px;
        background-color: #1dc8a4;
      }
      :deep(.el-pagination.is-background
          .el-pager
          li:not(.disabled).active:hover) {
        color: #fff !important;
      }
    }
  }
  :deep(.el-dialog) {
    min-height: 74vh;
  }
}
</style>
